<script setup>
  import {ref} from 'vue'
  let isActive = ref(true)
  // 样式绑定--数据控制元素样式
  // 操作class
    //三元绑定
      // :class = "条件？'类名'：'类名：'"
    //对象绑定
      // :class = "{类名: 布尔值，类名: 布尔值}"=>布尔值为真，添加类名，为假，移除类名
    // 静态类与动态类，可以共存
      //<标签 静态类 动态类>
  // 操作style
</script>

<template>
  <div>
    <p :class="isActive?'active':'active2'">三元绑定</p>
    <p :class="{active:isActive}">对象绑定</p>
    <p class="item" :class="{active:isActive}">静态+动态</p>
  </div>
</template>

<style scoped>
  .active {
    color: red;
  }
  .active2 {
    color: black;
  }
</style>